<!-- 单位选择组件，单选 -->
<template>
  <van-action-sheet v-model="showCompo" :close-on-click-overlay="false" @closed="closeSheet"  title="会签单位" cancel-text="确定">
  	<view class="tree-container">
  		<!-- <input v-model="filterText" placeholder="输入关键字进行过滤" /> -->
  		<van-field
  			v-model="filterText"
  			label=""
  			placeholder="输入关键字进行过滤"
  			:clearable="true"
  		  />
  		<ly-tree :tree-data="treeData"
  			:props="props"
  			ref="tree"
  			node-key="deptId"
  			show-radio
  			checkOnClickNode
  			:default-expanded-keys="expandKeys"
  			@check="handleCheck"
  			@radio-change="handleRadioChange"
  			@node-click="handleNodeClick"
  			:filter-node-method="filterNode"
  			child-visible-for-filter-node
  		/>
  	</view>
  </van-action-sheet>
</template>

<script>

export default{
  props: {
    showOrgtree:{
      type: Boolean,
      default: false
    },
  },
  data(){
    return{
		showCompo:false,//组件是否显示
		expandKeys: ["0"],//默认展开的节点-对应的deptId的值
		props: function() {
			return {
				// 这里的label就可以使用函数进行自定义的渲染了
				// label(data, node) {
				// 	return '节点' + node.data.personName;
				// },
				label: 'deptName', // 指把数据中的‘personName’当做label也就是节点名称
				children: 'children' // 指把数据中的‘childs’当做children当做子节点数据
			}
		},
		filterText:'',
		treeData: [],
		deptName:'',//选中的单位信息
		deptCode:'',//选中的单位信息
	}
  },
  mounted() {
  	//从缓存加载单位树
  	this.getOrgTree()
  },
  watch: {
  	filterText(val) {
  		this.$refs.tree.filter(val);
  	},
	showOrgtree(val){
		this.showCompo = val
	},
  },
  methods: {
	  closeSheet(){
	    let orgInfo = {orgName:this.deptName,deptCode:this.deptCode}
	    this.$emit('closeOrgTreeSheet',orgInfo)
	  },
	  // 只有在"点击"修改的指定节点会触发(也就是说这个方法只会触发一次)，obj中包含当前选中
	  handleCheck(obj) {
	  	// obj: {
	  	// 	checkedKeys: [9, 5], // 当前选中节点的id数组
	  	// 	checkedNodes: [{...}, {...}], // 当前选中节点数组
	  	// 	data: {...}, // 当前节点的数据
	  	// 	halfCheckedKeys: [1, 4, 2], // 半选中节点的id数组
	  	// 	halfCheckedNodes: [{...}, {...}, {...}], // 半选中节点的数组
	  	// 	node: Node {...} // 当前节点实例
	  	// }

	  	// console.log('handleCheck', obj);
	  },

	  // 只要节点的选中状态改变就触发（包括设置默认选中，点击选中/取消选中），会被触发多次
	  handleRadioChange(obj) {
	  	console.log("obj: " + JSON.stringify(obj));
	  	if(obj.checked == true){//{"checked":false,"node":{"time":1629361630143,"id":3459,"text":null,"checked":false,"indeterminate":false,"data":{"deptId":"002001","deptCode":"002001","deptName":"华北管理局","leaderId":"sysadmin","parentId":"002","allParentId":"0,002,002001","deptLevel":1,"sort":36,"deptType":"org","divisionId":"--","telephone":"11","address":"1","zipCode":"1     ","extend1":"华北管理局","extend2":null,"extend3":null,"extend4":null,"extend5":null,"extend6":"002001","extend7":null,"extend8":null,"extend9":null,"extend10":null,"isValid":"1","createUser":"CAAC_SYSTEM","createTime":"2021-07-27T12:30:00.011+0000","updateUser":null,"updateTime":null,"depth":null}}
	  		console.log(obj.node.data.deptName)//单位名称
	  		console.log(obj.node.data.deptId)//单位id
	  		this.deptName = obj.node.data.deptName
	  		this.deptCode = obj.node.data.deptId
	  	}else{
	  		this.deptName = ''
	  		this.deptCode = ''
	  	}
	  	// console.log('handleRadioChange', obj);
	  },

	  handleNodeClick(obj) {
	  	// console.log('handleNodeClick', JSON.stringify(obj));
	  	// console.log('getNodePath', this.$refs.tree.getNodePath(obj.data));
	  },
	  //呈报单位查询
	  filterNode(value, data) {
	  	if (!value) return true;
	  	return data.deptName.indexOf(value) !== -1;
	  },
	  getOrgTree(){
	  	this.treeData = this.cache.get('orgTree')
	  	// console.log("this.treeData: " + JSON.stringify(this.treeData));
	  	// uni.getStorage({
	  	//     key: 'orgTree',
	  	//     success: function (res) {
	  	// 		_this.treeData = res.data
	  	// 		console.log("this.treeData--->: " + JSON.stringify(_this.treeData));
	  	//     },
	  	// 	fail: function(e){

	  	// 	}
	  	// });
	  },
  }
}
</script>

<style>
.van-action-sheet{
  z-index: 9999;
  min-height: 80%;
}
</style>
